<!--
 * @Author: wang_sheshe
 * @Date: 2021-05-17 15:04:17
 * @LastEditTime: 2021-08-03 14:03:48
 * @Description: 巡视移动作业主页
-->
<template>
	<article class="bg_4dbfae homeIndex">
		<van-nav-bar title="巡视移动作业"  left-arrow>
            <!-- <template slot="right">
                <div class="parent-circle">
					<div class="child-circle"></div>
				</div>
            </template> -->
        </van-nav-bar>
		<!-- 头组件 -->
		<van-row class="bg_4dbfae header" style="padding-bottom: 0;">
            <van-col span="18">
                <van-search style="position: relative;top: -10px;font-size: 14px;"
				  @click="showSubStation=true" v-model="subName" show-action clearable readonly disabled shape="round" background="#F5F6FA" placeholder="请选择变电站">
					<template slot="action" style="position: relative;
					right: 35px;">
						<van-icon 
						lick="showSubStation=true"/>
					</template>
			    </van-search>
			</van-col>
            <van-col span="3" class="center_center" style='margin-left: -2%;'>
				<div class="radis-border">
					<van-image class="imgSize" width="26" height="27" @click="rfidBtn" :src="icon.rfid" />
				</div>
            </van-col>
			<van-col span="3" class="center_center" style='margin-right: 2%;'>
				<div class="radis-border">
					<van-image class="imgSize" width="26" height="27" @click="scanBtn" :src="icon.scan" />
				</div>
            </van-col>
		</van-row>
		
		<div class="doc-wrapper">
			<!-- tab列表-->
			<van-grid :column-num="4">
				<van-grid-item v-for="(tab, index) in tabbar" :key="index" @click="goToPage(tab)">
				   <van-image style="margin-bottom: 15px;" :src="tab.active" width="44" height="44"/>
				   <span v-text="tab.name" style="font-size: 16px;"></span>
				</van-grid-item>
			</van-grid>
			<van-cell value="更多" @click="showScreenPage" is-link>
				<template slot="title">
					<span class="line_green"></span> 待办工作
				</template>
			</van-cell>

			<van-cell class="list" icon="stop" :title="taskName(taskInfo)"
            :label="formatTime(taskInfo.requireFinishTime)"
            v-for="(taskInfo,index) in taskList"
			:key="index">
            <div solt="value">
              <van-button 
                type="primary"
                size="small"
                round
                color="#17B49B"
                @click="skipPage(taskInfo)" 
                >
                执行
              </van-button>  
            </div>
          </van-cell>
		</div>

		<!-- 反馈组件 选择变电站-->
		<van-popup  class="selSub" round v-model="showSubStation" position="bottom">
			<selSubstation @close="onClose" 
			:subId="subId"
			@selected="selSubstationBtn">
			</selSubstation>
		</van-popup>
	</article>
</template>

<script type="text/javascript">
	import selSubstation  from "@/components/SelectSubstation"
	import {queryUnfinishTourTask} from "../../api/tourTask"
	import Util from "@/utils/util"
	import {mapGetters} from 'vuex'
	import FileUtils from "@/utils/fileUtil"
	import {scan} from "@/utils/qrCode" 
	export default {
		name: 'MainHome',
		components: {
			selSubstation
		},
		data() {
			return {
				tabbar: [{
						name: '巡视',
						path: 'tourTaskIndex',
						pathName: 'home',
						icon: 'compass-full',
						active: require('../../../../assets/img/mainIndex/xunshi.png'),
					},
					{
						name: '维护',
						path: 'addProtect',
						pathName: 'pictureFileResource',
						active: require('../../../../assets/img/mainIndex/weihu.png'),
					},
					{
						name: '抄录',
						path: 'copyMenu',
						pathName: 'checkRepair',
						active: require('../../../../assets/img/mainIndex/chaolu.png'),
					},
					{
						name: '缺陷',
						path: 'DefectList',
						pathName: 'defect',
						active: require('../../../../assets/img/mainIndex/quexian.png'),
					},
					// {
					// 	name: '隐患',
					// 	path: 'HiddenDangerList',
					// 	pathName: 'personal',
					// 	active: require('../../../../assets/img/mainIndex/yinhuan.png'),
					// }
				],
				userInfo: {},
				showSubStation: false,//变电站显示开关
				icon: {
					more:require('../../../../assets/img/mainIndex/more.png'),
					rfid:require('../../../../assets/img/mainIndex/rfid.png'),
					scan:require('../../../../assets/img/mainIndex/scan.png'),
					goford:require('../../../../assets/img/mainIndex/goford.png')
				},
				// subId: "",//变电站id
				// subName: "",//变电站名称
				taskList: [],
			}
		},
		
		computed: {
			...mapGetters(["subId","subName"]),
			taskName() {
				return function(item) {
					var str = item.taskType + " - ";
					str += item.voltLevel ? item.voltLevel : "";
					str += item.substationName ? item.substationName : "";
					return  str;
				}
			},
			formatTime() {
				return function(val) {
					return Util.DateUtil.getFormatDateByLong(val,'yyyy-MM-dd')
				}
			}
		},
		
		methods: {
			/**
			* @description: 进入开始执行页面
			* @param {*}
			* @return {*}
			*/
			skipPage(taskInfo){
				console.log("taskInfo.voltLevel",taskInfo)
				if(taskInfo.voltLevel) {
					this.$router.push({"name":"beginIndex",params:{
						taskInfo: taskInfo
					}})
				}else{
					this.$router.push({"name":"addProtect",params:{
						taskInfo: taskInfo
					}})
				}
			},
			// 查看更多代办任务列表
			showScreenPage(){
				this.$router.push({name:"unFinishTask",params:{subId:this.subId}})
			},
			goToPage(tab){
				this.$router.push({
					name: tab.path,
					params: {
						subId: this.subId,//变电站id
					}
				})
			},
			//变电站选中回调
			selSubstationBtn(sub) {
				this.showSubStation = false;
				this.$store.commit("SET_SUBID",sub.substationId);
				this.$store.commit("SET_SUBNAME",sub.substationName)
				this.$store.commit("SET_PowerLevelN",sub.powerLevelName)
				this.queryNewTourTask();
			},
			/**
			 * 扫描变电站 或者rfid
			 * 
			 */
			async scanBtn(){
				let result = await scan().catch(err => {
					console.log('扫描检修资料二维码错误信息:', err)
					this.$Toast("扫描失败，请联系管理员");
				})	
				console.log("console.log(result)")
				console.log(result)
				console.log(JSON.stringify(result))
				// if(result&& result.text && result.text.indexOf('JXZL') !== -1) {
				// 	Loading.show('正在查询资料')
				// 	let ids = JSON.parse(result.text).JXZL.map(val => val.id)
				// 	let response = await getCreatQRCode({ids:ids})
				// 	this.category = response.data
				// 	Loading.close()
				// } else {
				// 	// 扫码异常处理
				// 	Loading.close()
				// 	const message = result ? '请扫描检修资料二维码' : '扫码异常，请联系管理员'
				// 	Dialog.alert({
				// 		title: '提示',
				// 		message
				// 	})
				// 	if (result.format!="QR_CODE") {
				// 		Toast("扫描类型出错，请重新扫描");	
				// 	}
				// }
			},
			//rfid
			rfidBtn() {
				var name = new Date()+".xlsx";
				//下载文件
				FileUtils.downloadFile(
					{
						name: name,
						url: this.downloadUrl + '?id=' + doc.id
					}
				)
				//打开文件
				FileUtils.openFile(name);
			},
			/**
			* @description: 关闭变电站
			*/
			onClose() {
				this.showSubStation = false;
			},
			/**
			* @description: 查询未完成的任务1.巡视任务、设备维护2.最新的5个任务
			* @param {*}
			* @return {*}
			*/
			queryNewTourTask() {
				var self = this;
				var params = {
					substationId:this.subId,//任务id
					pageNum: 1,
					pageSize: 6,
					roleCode: "",
					userId: this.userInfo.userId,
				};
				this.$Toast.loading({
						duration: 0,//展示时长 0不会消失
						message: "巡视任务查询中...",
						forbidClick: true,//是否禁止背景点击
						overlay: true//是否显示背景遮罩层
					})
				queryUnfinishTourTask(params).then(data => {
					self.$Toast.clear();
					if(data.success) {
						self.$Toast.success(data.msg)
						self.taskList = data.data;
					}else{
						self.$Toast.fail(data.msg)
					}
				}).catch(err => {
					self.$Toast.clear();
					self.$Toast.fail(err)
				})
			},
		},
		
		watch: {
			
		},
		mounted() {
			
		},
		created() {
			var userInfo = localStorage.getItem("userInfo");
			this.userInfo = JSON.parse(userInfo);
			this.queryNewTourTask();
		},
		
	}
</script>

<style scoped>
	article {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.bg_4dbfae{
		background: #f5f6fa !important;
	}
	.homeIndex /deep/ .van-grid-item__content{
		background: #fff !important;
	}
	.center_center{
        display:flex;
        justify-content:center;
        align-items:center;
    }
	.header .van-cell {
    font-size: 0.3rem;
    justify-content: center;
    align-items: center;
    }
	.van-search__content--round {
      background: white !important;
	  color: #E6E6E6 !important;
    }
	.tc-keyword-wrapper {
		margin: 5px 0;
	}
	
	.defectList-wrapper {
		flex: 1 1 0%;
		overflow-y: scroll;
		background: white;
	}
	.van-tabbar--fixed {
		position: fixed;
		top: 62px;
		left: 0;
		background: #f5f6fa !important;
    }
	.dot {
		display: inline-block;
		height: 8px;
		width: 8px;
		border-radius: 50%;
		background-color: #CCCCCC;
	}
	.doc-wrapper{
		margin: 15px;
		background: white;
		border-radius: 10px;
		margin-top: 0px;
	}
	.van-button--primary {
		background-color: #17B49B;
		border: 0.02667rem solid #17B49B;
		width: 60px;
    }
	.flex-c{
		position: relative;
		top: 0.05rem;
		text-align: right;
		padding-right: 0.5rem;
	}
	.van-tabbar-item__icon img {
		display: block;
		height: 1rem;
		margin-bottom: 5px;
    }
	.homeIndex /deep/ [class*=van-hairline]::after{
		border: none !important;
	}
	.vanRow_item{
		padding: 15px;
		border-radius: 4px;
		background: #FAFAFA;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		margin: 15px;
	}
	.van-row{
		padding: 15px;
		border-radius: 4px;
		background: #FAFAFA;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.line_black{
		display: inline-block;
		height: 14px;
		padding-left: 18px;
		border-left: 1px solid rgb(0, 0, 0);
		margin-left: 10px;
		position: relative;
		top: 2px;
	}
	.line_green{
		display: inline-block;
		height: 16px;
		width: 3px;
		background: #17B49B;
		border-radius: 3px;
		position: relative;
		top: 3px;
	}
	.daiban{
		height: 30px;line-height: 30px;padding: 20px;color: #333333;display: flex;
			justify-content: space-between;background-color: #fff;
	}
	.homeIndex /deep/ .van-search__action{
		position: relative;right: 35px;
	}
	.selSub{
        height:100%;width:100%;  
    }
	.list /deep/ .van-button{
		width: 60px;
	}
</style>
